---
title: PlatePlugin
description: API reference for Plate plugins.
---

Plate plugins are objects passed to `Plate` [plugins](/docs/api/core/plate#plugins) prop.

## Generic Types

The `PlatePlugin` interface uses one generic type:

<APIAttributes>
<APIItem name="C" type="AnyPluginConfig = PluginConfig">
Represents the plugin configuration. This type extends `PluginConfig` which includes `key`, `options`, `api`, and `transforms`.
</APIItem>
</APIAttributes>

Usage example:

```typescript
type MyPluginConfig = PluginConfig<
  'myPlugin',
  { customOption: boolean },
  { getData: () => string },
  { customTransform: () => void }
>;

const MyPlugin = createPlatePlugin<MyPluginConfig>({
  key: 'myPlugin',
  // plugin implementation
});
```

## Plugin Properties

## Plugin Properties

<APIAttributes>
<APIItem name="key" type="C['key']" required>
Unique identifier used by Plate to store the plugins by key in `editor.plugins`.
</APIItem>

<APIItem name="api" type="UnionToIntersection<InferApi<C>>">
An object of API functions provided by the plugin. These functions are accessible via `editor.api[key]`.
</APIItem>

<APIItem name="transforms" type="UnionToIntersection<InferTransforms<C>>">
Transform functions provided by the plugin that modify the editor state. These are accessible via `editor.tf[key]`.
</APIItem>

<APIItem name="options" type="InferOptions<C>">
Extended properties used by the plugin as options.
</APIItem>

<APIItem name="handlers" type="Nullable<DOMHandlers<WithAnyKey<C>> & { onChange?: OnChange<WithAnyKey<C>> }>">
Event handlers for various editor events, including `onChange`.
</APIItem>

<APIItem name="inject" type="Nullable<{...}>">
Defines how the plugin injects functionality into other plugins or the editor.

<APISubList>
<APISubListItem parent="inject" name="nodeProps" type="InjectNodeProps<WithAnyKey<C>>" optional>
Properties used by Plate to inject props into any node component.
</APISubListItem>
<APISubListItem parent="inject" name="plugins" type="Record<string, Partial<EditorPlatePlugin<AnyPluginConfig>>>" optional>
Property that can be used by a plugin to allow other plugins to inject code.
</APISubListItem>
<APISubListItem parent="inject" name="targetPluginToInject" type="function" optional>
A function that returns a plugin config to be injected into other plugins `inject.plugins` specified by targetPlugins.
</APISubListItem>
<APISubListItem parent="inject" name="targetPlugins" type="string[]" optional>
Plugin keys used by `InjectNodeProps` and the `targetPluginToInject` function.

- **Default:** `[ParagraphPlugin.key]`
</APISubListItem>
</APISubList>
</APIItem>

<APIItem name="node" type="BasePluginNode">
Defines the node-specific configuration for the plugin.

<APISubList>
<APISubListItem parent="node" name="isElement" type="boolean" optional>
Indicates if this plugin's nodes should be rendered as elements.
</APISubListItem>
<APISubListItem parent="node" name="isInline" type="boolean" optional>
Indicates if this plugin's elements should be treated as inline.
</APISubListItem>
<APISubListItem parent="node" name="isLeaf" type="boolean" optional>
Indicates if this plugin's nodes should be rendered as leaves.
</APISubListItem>
<APISubListItem parent="node" name="isVoid" type="boolean" optional>
Indicates if this plugin's elements should be treated as void.
</APISubListItem>
<APISubListItem parent="node" name="isMarkableVoid" type="boolean" optional>
Indicates if this plugin's void elements should be markable.
</APISubListItem>
<APISubListItem parent="node" name="type" type="string" optional>
Specifies the type identifier for this plugin's nodes.

- **Default:** `plugin.key`
</APISubListItem>
<APISubListItem parent="node" name="component" type="NodeComponent | null" optional>
React component used to render this plugin's nodes.
</APISubListItem>
<APISubListItem parent="node" name="props" type="NodeProps<WithAnyKey<C>>" optional>
Additional props to be passed to the node component.
</APISubListItem>
</APISubList>
</APIItem>

<APIItem name="override" type="object">
Allows overriding components and plugins by key.

<APISubList>
<APISubListItem parent="override" name="components" type="Record<string, NodeComponent>" optional>
Replace plugin `NodeComponent` by key.
</APISubListItem>
<APISubListItem parent="override" name="plugins" type="Record<string, Partial<EditorPlatePlugin<AnyPluginConfig>>>" optional>
Extend `PlatePlugin` by key.
</APISubListItem>
<APISubListItem parent="override" name="enabled" type="Partial<Record<string, boolean>>" optional>
Enable or disable plugins.
</APISubListItem>
</APISubList>
</APIItem>

<APIItem name="parser" type="Nullable<Parser<WithAnyKey<C>>>">
Defines how the plugin parses content.
</APIItem>

<APIItem name="parsers" type="object">
Defines serializers and deserializers for various formats.

<APISubList>
<APISubListItem parent="parsers" name="html" type="Nullable<{ deserializer?: HtmlDeserializer<WithAnyKey<C>>; serializer?: HtmlSerializer<WithAnyKey<C>> }>" optional>
HTML parser configuration.
</APISubListItem>
<APISubListItem parent="parsers" name="htmlReact" type="Nullable<{ serializer?: HtmlReactSerializer<WithAnyKey<C>> }>" optional>
HTML React serializer configuration.
</APISubListItem>
</APISubList>
</APIItem>

<APIItem name="render" type="Nullable<{...}>">
Defines rendering functions for various parts of the editor.

<APISubList>
<APISubListItem parent="render" name="aboveEditable" type="React.FC<{ children: React.ReactNode }>" optional>
Renders a component above the `Editable` component but within the `Slate` wrapper.
</APISubListItem>
<APISubListItem parent="render" name="aboveNodes" type="NodeWrapperComponent<WithAnyKey<C>>" optional>
Renders a component above all other plugins' `node` components.
</APISubListItem>
<APISubListItem parent="render" name="aboveSlate" type="React.FC<{ children: React.ReactNode }>" optional>
Renders a component above the `Slate` wrapper.
</APISubListItem>
<APISubListItem parent="render" name="afterEditable" type="EditableSiblingComponent" optional>
Renders a component after the `Editable` component.
</APISubListItem>
<APISubListItem parent="render" name="beforeEditable" type="EditableSiblingComponent" optional>
Renders a component before the `Editable` component.
</APISubListItem>
<APISubListItem parent="render" name="belowNodes" type="NodeWrapperComponent<WithAnyKey<C>>" optional>
Renders a component below all other plugins' `node` components, but above their `children`.
</APISubListItem>
<APISubListItem parent="render" name="node" type="NodeComponent" optional>
Renders the node component.
</APISubListItem>
</APISubList>
</APIItem>

<APIItem name="shortcuts" type="Shortcuts">
Defines keyboard shortcuts for the plugin.
</APIItem>

<APIItem name="useOptionsStore" type="StoreApi<C['key'], C['options']>">
Store for managing plugin options.
</APIItem>

<APIItem name="dependencies" type="string[]">
An array of plugin keys that this plugin depends on.
</APIItem>

<APIItem name="enabled" type="boolean" optional>
Enables or disables the plugin. Used by Plate to determine if the plugin should be used.
</APIItem>

<APIItem name="plugins" type="any[]">
Recursive plugin support to allow having multiple plugins in a single plugin.
</APIItem>

<APIItem name="priority" type="number">
Defines the order in which plugins are registered and executed.

- **Default:** `100`
</APIItem>

<APIItem name="decorate" type="Decorate<WithAnyKey<C>>" optional>
Property used by Plate to decorate editor ranges.
</APIItem>

<APIItem name="useHooks" type="UseHooks<WithAnyKey<C>>" optional>
Hook called when the editor is initialized.
</APIItem>
</APIAttributes>

## Plugin Methods

<APIAttributes>
<APIItem name="configure" type="function">
Creates a new plugin instance with updated options.

```ts
(config: PlatePluginConfig<C['key'], InferOptions<C>, InferApi<C>, InferTransforms<C>> | ((ctx: PlatePluginContext<C>) => PlatePluginConfig<C['key'], InferOptions<C>, InferApi<C>, InferTransforms<C>>)) => PlatePlugin<C>
```
</APIItem>

<APIItem name="extend" type="function">
Creates a new plugin instance with additional configuration. Can accept either an object or a function.

```ts
(extendConfig: Partial<PlatePlugin> | ((ctx: PlatePluginContext<AnyPluginConfig>) => Partial<PlatePlugin>)) => PlatePlugin
```
</APIItem>

<APIItem name="extendPlugin" type="function">
Extends an existing nested plugin or adds a new one if not found. Supports deep nesting.

```ts
(key: string, extendConfig: Partial<PlatePlugin> | ((ctx: PlatePluginContext<AnyPluginConfig>) => Partial<PlatePlugin>)) => PlatePlugin
```
</APIItem>

<APIItem name="withComponent" type="function">
Sets or replaces the component associated with a plugin.

```ts
(component: NodeComponent) => PlatePlugin<C>
```
</APIItem>

<APIItem name="extendApi" type="function">
Extends the plugin's API.

```ts
(api: (ctx: PlatePluginContext<AnyPluginConfig>) => any) => PlatePlugin<C>
```
</APIItem>

<APIItem name="extendEditorApi" type="function">
Extends the editor's API with plugin-specific methods.

```ts
(api: (ctx: PlatePluginContext<AnyPluginConfig>) => any) => PlatePlugin<C>
```
</APIItem>

<APIItem name="extendTransforms" type="function">
Extends the plugin's transforms.

```ts
(transforms: (ctx: PlatePluginContext<AnyPluginConfig>) => any) => PlatePlugin<C>
```
</APIItem>

<APIItem name="extendEditorTransforms" type="function">
Extends the editor's transforms with plugin-specific methods.

```ts
(transforms: (ctx: PlatePluginContext<AnyPluginConfig>) => any) => PlatePlugin<C>
```
</APIItem>

<APIItem name="extendOptions" type="function">
Extends the plugin options with selectors.

```ts
(options: (ctx: PlatePluginContext<AnyPluginConfig>) => any) => PlatePlugin<C>
```
</APIItem>
</APIAttributes>

## Plugin Context

Most plugin functions receive a `PlatePluginContext` object as their first parameter. This object includes:

<APIAttributes>
<APIItem name="editor" type="PlateEditor">
The current editor instance.
</APIItem>
<APIItem name="plugin" type="EditorPlatePlugin<C>">
The current plugin instance.
</APIItem>
<APIItem name="getOption" type="function">
Function to get a specific option value.
</APIItem>
<APIItem name="getOptions" type="function">
Function to get all options for the plugin.
</APIItem>
<APIItem name="setOption" type="function">
Function to set a specific option value.
</APIItem>
<APIItem name="setOptions" type="function">
Function to set multiple options.
</APIItem>
<APIItem name="useOption" type="function">
Hook to subscribe to a specific option value in a React component.
</APIItem>
</APIAttributes>

For more detailed information on specific aspects of Plate plugins, refer to the individual guides on [Plugin Configuration](/docs/plugin), [Plugin Methods](/docs/plugin-methods), [Plugin Context](/docs/plugin-context), [Plugin Components](/docs/plugin-components), and [Plugin Shortcuts](/docs/plugin-shortcuts).